<template id="paidFee">

  <div class="paidFee">
    <div class="searchBox">


      <div class="row paidFeeHeader pickTimerBox">
        <span class="leftWords timerWords" style="padding-left: 0">时间</span>
        <div class="col">
          <template>
            <div id="remember">

              <mt-button class="pickBtn" size="small" type="default" @click="openPicker_s">{{pickerValue_s_s | textFormate}}</mt-button>

              <mt-datetime-picker  @confirm="handleConfirm_s" ref="picker_s" type="date" v-model="pickerValue_s"></mt-datetime-picker>

            </div>
          </template>
        </div>

        <div class="col col-10 tz">至</div>

        <div class="col">
          <template>
            <div id="remember22">
              <mt-button class="pickBtn" size="small" type="default" @click="openPicker_e">{{pickerValue_e_e | textFormate}}</mt-button>

              <mt-datetime-picker  @confirm="handleConfirm_e" ref="picker_e" type="date" v-model="pickerValue_e"></mt-datetime-picker>


            </div>
          </template>
        </div>
      </div>




      <form action="" class="searchForm">
        <span class="leftWords">缴费编号</span>
        <input type="text" name="paidFreeSearch" id="paidFreeSearch" class="paidFreeSearch" v-model.trim="paidFreeSearch" ref="paidFreeSearch" @blur="isBlur">
        <div class="searchInfo" @click="getSearchInp">
          <!--<i class="icon iconfont icon-search" v-show="isShowSearch">&#xe606;</i>-->
          <span v-show="isShowSearch">请输入缴费编号进行搜索</span>
          <i class="icon iconfont icon-back" @click="delVal" v-show="isShowDel">&#xe649;</i>
        </div>
      </form>


      <div class="row paidFeeHeader queryBtn searchBtnInfo" style="background-color: #eee;">
        <mt-button type="danger" size="small" @click="checkPayList">查询</mt-button>
      </div>

      <div class="payFee_content">
        <div v-if="paidFeeData.length">
          <div class="payFee_item bg_ff" v-for="todo in paidFeeData">
            <div class="row">
              <div class="col" >
                <p class="fs_13">{{todo.projectName}}</p>
                <div>
                  <span class="fs_11">实缴费用</span>
                  &nbsp;&nbsp;
                  <span class="fs_11 col_0ae">{{todo.totalAmt | formatNumber}}元</span>
                </div>
              </div>
              <div class="col tr col-25" @click="goPayDaily(todo)">
                <span class="payFee_item_btn">查看详情</span>
              </div>
            </div>
            <div class="row">
              <div class="col fs_11">缴纳用户&nbsp;{{todo.feeuUserName}}</div>
              <div class="col fs_11 tr">缴纳日期&nbsp;{{new Date(todo.formatPayDate*1000) | textFormate}}</div>

            </div>
          </div>
        </div>
        <div v-else="" class="noPay_style">
          <no-data :noParams = 'noParams'></no-data>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

  import Vue from 'vue'
  import noData from "../common/noData.vue";

  Vue.filter( 'textFormate' , function(value) {
    return value.Format('yyyy-MM-dd') ;
  });


  export default {
    components: {noData},

    data () {
      return {

        pickerValue_s:new Date(new Date().setDate(new Date().getDate() - 7 )),
        pickerValue_s_s: new Date(new Date().setDate(new Date().getDate() - 7 )),

        pickerValue_e:new Date(),
        pickerValue_e_e: new Date(),



        isShowSearch:true,
        isShowDel:false,
        paidFreeSearch:'',
        paidFeeData : [],

        noParams: {
          src: '../../../static/image/noFee.png',
          text: '亲，您当前暂无已缴费用哦～'
        }
      }
    },
    methods: {

      handleConfirm_s: function () {
        this.pickerValue_s_s = this.pickerValue_s;
      },

      handleConfirm_e: function () {
        this.pickerValue_e_e = this.pickerValue_e;
      },

      openPicker_s() {
        this.$refs.picker_s.open();
      },
      openPicker_e() {
        this.$refs.picker_e.open();
      },

      getSearchInp:function () {
        this.$refs.paidFreeSearch.focus()
        this.isShowSearch = false
        this.isShowDel = true
      },

      isBlur:function () {
        var _self=this
          if(_self.paidFreeSearch == ''){
            _self.isShowSearch = true;
            _self.isShowDel = false;
          }


      },

      //查询缴费列表接口
      checkPayList: function () {

         if(this.validTest()){
           var that = this;
           var param = {
             feeId: this.paidFreeSearch,
             openAccount: sessionStorage.getItem('userId'),
             beginDate: this.pickerValue_s_s.Format('yyyy-MM-dd'),
             endDate: this.pickerValue_e_e.Format('yyyy-MM-dd')
           };
           //已缴费查询接口
           this.$post(this.$urlAll.already_payment, param).then(function (response) {

             that.paidFeeData = response.t.paymentList;
           });
         }
      },

      validTest: function () {
        var testForm = true;
        if(this.pickerValue_s_s.getTime() >= this.pickerValue_e_e.getTime()){
          DbsAlert.show({
            title: '提示',
            text: '开始日期不能大于结束日期，请重新选择～'
          });
          return testForm = false;
        }

        return testForm;
      },



      goPayDaily:function (item) {
        this.$router.push({path:'/pay/payDaliy', query: item})
      },


      delVal:function () {
        this.paidFreeSearch = ''
      }


    },
    //获取后台数据，dom渲染之前
    created: function(){

      var options = {
        openAccount: sessionStorage.getItem('userId'),
        beginDate: this.pickerValue_s_s.Format('yyyy-MM-dd'),
        endDate: this.pickerValue_e_e.Format('yyyy-MM-dd')
      };

      var that = this;

      //已缴费查询接口
      this.$post(this.$urlAll.already_payment, options).then(function (response) {
        that.paidFeeData = response.t.paymentList;
      });

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  @import "../../assets/css/iconfont.css";





  .queryBtn{
    display: flex;
    align-items: center;

  }

  button{
    width: 100%;
  }
  .paidFreeSearch{
    width: 2.5rem;
    height: 0.29rem;
    border: none;
    -webkit-border-radius:0.04rem;
    -moz-border-radius:0.04rem;
    border-radius:0.04rem;
    position: absolute;
    left: 0.9rem;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.1rem;
  }
  .searchBox{
    width: 100%;
    height: 0.44rem;
    position: relative;
  }
  .searchInfo {
    width: 2.5rem;
    height: 0.29rem;
    position: absolute;
    left: 0.9rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0.29rem;

  }
  .searchInfo span {
    font-size: 0.11rem;
    color: #999;
  }
  .icon-search{
    font-size: 0.14rem;
    padding-right: 0.06rem;
    color: #999;
  }
  .icon-back {
    position: absolute;
    right: 0.1rem;
    font-size: 0.14rem;
  }
  .paidFeeHeaderAll .date-sel{
    border:none;
    outline: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background-color: #ffffff;
  }
  .payFee_head{
    padding-left: 0.1rem;
    line-height: 0.44rem;
    color: #333;
    border-bottom: 1px solid #eee;
  }
  .payFee_item{
    padding: 0 0.1rem;
    margin-bottom: 0.05rem;
  }
  .payFee_item .row:first-child{
    padding: 0 0.2rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
  }
  .payFee_item_btn{
    width: 0.75rem;
    height: 0.26rem;
    border: 1px solid #c9c9c9;
    border-radius: 0.14rem;
    font-size: 0.11rem;
    display: inline-block;
    text-align: center;
    line-height: 0.26rem;
  }
  .payFee_item .row:last-child{
    padding: 0 0.2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #999;
  }

  .payFee_content{
    margin-top: 0;
  }
  .searchForm{
    height: 0.44rem;
    position: relative;
    line-height: 0.44rem;
    background-color: #fff;
  }

  .paidFeeHeader{
    height: 0.44rem;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    line-height: 0.44rem;
    padding: 0 0.1rem;
  }

  .paidFeeHeaderAll{
    position: absolute;
    right: 0.1rem;
  }
  .icon-all{
    font-size: 0.3rem;
    color: #666;
  }
  .paidFeeHeaderAllBtn{
    float: left;
    font-size: 0.14rem;
    color: #666;
  }
  .paidFeeHeaderTime{
    font-size: 0.14rem;
    color: #333;
  }
  .leftWords{
    padding-left: 0.1rem;
    font-size: 0.14rem;
    color: #333;
  }
  .pickTimerBox{
    padding-left: 0.9rem;
    position: relative;
    margin-top: 0.1rem;
  }
  .timerWords{
    position: absolute;
    left: 0.1rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .pickBtn{
    background-color: #fff;
    color: #666;
  }
   .pickBtn label{
    font-size: 0.11rem !important;
  }
  .searchBtnInfo button{
    height: 0.34rem;
    background-color: #ff4444;
  }
  .searchBtnInfo{
    height: auto;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
</style>
